<template>
  <view class="vaccine-catalogue">
    <view class="title">疫苗目录</view>
    <scroll-view class="scroll-container" scroll-x="true">
      <view
        class="catalogue"
        :class="{ selected: catalogueIndex == catalogue.id }"
        v-for="catalogue in catalogueNavs"
        :key="catalogue.id"
        @click="handelTapCatalogue(catalogue)"
        >{{ catalogue.label }}</view
      >
    </scroll-view>

    <!-- 疫苗列表 -->
    <u-loading-icon
      text="加载中"
      textSize="18"
      v-if="loadingVaccine"
    ></u-loading-icon>
    <view class="vaccine-box" v-if="!loadingVaccine">
      <u-index-list :index-list="indexList" custom-nav-height="80">
        <view v-for="char in indexList" :key="char">
          <!-- #ifdef APP-NVUE -->
          <u-index-anchor :text="char"></u-index-anchor>
          <!-- #endif -->
          <u-index-item>
            <!-- #ifndef APP-NVUE -->
            <u-index-anchor
              :text="char"
              height="30"
              bgColor="#eee"
            ></u-index-anchor>
            <!-- #endif -->
            <view
              class="list-cell"
              v-for="cell in vaccineList.filter(
                (item) => item.indexChar == char
              )"
              :key="cell.vaccine_id"
              @click="
                linkTo(
                  '/pages/Vaccine/VaccineDetail/index?id=' + cell.vaccine_id
                )
              "
            >
              <view class="name">{{ cell.vaccine_name }}</view>
              <view class="alias">{{ cell.vaccine_alias }}</view>
            </view>
          </u-index-item>
        </view>
      </u-index-list>
    </view>
  </view>
</template>

<script>
import { queryVaccineByCatalogue } from "@/api";
import Pinyin from "@/utils/chinesePY";
export default {
  data() {
    return {
      catalogueNavs: [
        { id: 0, label: "全部" },
        { id: 1, label: "儿童" },
        { id: 2, label: "成人" },
        { id: 3, label: "老人" },
        { id: 4, label: "女性" },
        { id: 5, label: "动物咬伤" },
      ],
      catalogueIndex: 0,
      indexList: [],
      itemArr: [
        ["列表A1", "列表A2", "列表A3"],
        ["列表B1", "列表B2", "列表B3"],
        ["列表C1", "列表C2", "列表C3"],
      ],

      vaccineList: [],

      loadingVaccine: false,
    };
  },

  components: {},

  async mounted() {
    // 查询全部的分类
    this.fetchData("全部");
  },

  methods: {
    // 点击目录事件
    handelTapCatalogue(catalogue) {
      // 获取数据
      this.fetchData(catalogue.label);
      this.catalogueIndex = catalogue.id;
    },

    // 获取数据
    async fetchData(catalogueName) {
      this.loadingVaccine = true;
      let result = await queryVaccineByCatalogue(catalogueName);
      let vaccineList = result.data;
      this.indexList = [];
      vaccineList = vaccineList.map((item) => {
        let indexChar = Pinyin.getWordsCode(item.vaccine_name)
          .slice(0, 1)
          .toUpperCase();
        if (this.indexList.indexOf(indexChar) == -1) {
          this.indexList.push(indexChar);
        }
        return {
          ...item,
          indexChar,
        };
      });
      this.indexList.sort();
      this.vaccineList = vaccineList;
      this.loadingVaccine = false;
    },


     linkTo(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.vaccine-catalogue {
  .title {
    margin-top: 40rpx;
    padding: 0 40rpx;
    font-size: 35rpx;
  }
  .scroll-container {
    margin-top: 20rpx;
    padding: 0 40rpx;
    white-space: nowrap;
    width: 100%;
    overflow-x: auto;
    .catalogue {
      padding: 15rpx 30rpx;
      border: 1px solid rgba(0, 0, 0, 0.1);
      display: inline-block;
      margin-right: 20rpx;
      border-radius: 15rpx;
      font-size: 28rpx;
      &.selected {
        background: #fff;
        box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.05);
        border: 0;
      }
    }
  }

  .vaccine-box {
    margin-top: 30rpx;

    .list-cell {
      padding: 40rpx;
      .name {
        font-size: 30rpx;
      }
      .alias {
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}
</style>
